<template>
  <div class="creator-wall gap-col-52" ref="creatorWall">
    <div class="desc">
      <div class="font-size-14 font-weight-500 line-height-140 text-center">{{ $t('title.popularCreator') }}</div>
      <div class="font-size-12 font-weight-400 line-height-120 text-center">{{ $t('title.followToView') }}</div>
    </div>
    <div class="creators" :class="{ swiping }">
      <Link
        v-for="(creator, i) in creators"
        class="creator"
        :class="{
          curr: currIndex === i,
          prev: prevIndex === i,
          next: nextIndex === i,
          prev2: prev2Index === i,
          next2: next2Index === i,
          'prev-out': prev2Index > i,
          'next-out': next2Index < i,
        }"
        :key="creator.aff"
        :href="`/${creator.username}`"
        :title="creator.nickname || creator.username"
        :style="
          swiping
            ? currIndex === i
              ? currStyle
              : prevIndex === i
              ? prevStyle
              : nextIndex === i
              ? nextStyle
              : prev2Index === i
              ? prev2Style
              : next2Index === i
              ? next2Style
              : ''
            : ''
        "
        @click="toCreatorPage(creator.username, creator.aff)"
      >
        <Video
          v-if="i >= prev2Index && i <= next2Index"
          :url="creator.video_path"
          :active="i === currIndex"
          :ready="i >= prev2Index && i <= next2Index"
          in-card
        ></Video>
        <div class="info">
          <Avatar
            class="avatar mb-2"
            :src="creator.avatar"
            :radius="38"
            :vip="creator.is_vip"
            :vipTier="creator.tier"
          ></Avatar>
          <div class="nickname font-size-14 font-weight-500 line-height-140">{{ creator.nickname }}</div>
          <div class="username font-size-14 font-weight-500 line-height-140 mb-4">{{ `@${creator.username}` }}</div>
          <FollowButton :user-id="creator.aff" :is-follow="creator.is_follow" style-gradient></FollowButton>
        </div>
      </Link>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { $t } from '@/i18n'
import Link from '@/components/common/Link.vue'
import Avatar from '@/components/multimedia/Avatar.vue'
import Video from '@/components/multimedia/Video.vue'
import FollowButton from '@/components/viewer/stateful/FollowButton.vue'
import { usePreventTouchmove } from '@/compositions/mobile/preventTouchmove'
import { useSwipe } from '@/compositions/mobile/swipe'

const props = defineProps({
  creators: { type: Array, required: true },
})

const emits = defineEmits(['toEnd'])

const HALF_VIEW_WIDTH = 214 / 2
const currIndex = ref(0)
const prevIndex = computed(() => currIndex.value - 1)
const nextIndex = computed(() => currIndex.value + 1)
const prev2Index = computed(() => currIndex.value - 2)
const next2Index = computed(() => currIndex.value + 2)

const creatorWall = ref(null)

// 滑動操作
const { offset, swiping } = useSwipe(creatorWall, {
  viewLength: HALF_VIEW_WIDTH * 2,
  isBlockBackward: () => currIndex.value === 0,
  isBlockForward: () => currIndex.value === props.creators.length - 1,
  onBackward: () => {
    currIndex.value -= 1
    if (currIndex.value - 1 >= props.creators.length - 2) {
      emits('toEnd')
    }
  },
  onForward: () => {
    currIndex.value += 1
    if (currIndex.value + 1 >= props.creators.length - 2) {
      emits('toEnd')
    }
  },
})

// 滑動中關閉瀏覽器預設行為
usePreventTouchmove(creatorWall)

// 滑動時的樣式
const currStyle = computed(() => {
  if (swiping.value && offset.value > 0) {
    const { offset, rate, rateY } = getTransitionValue()
    const transform = `translate(calc(-50% - ${offset}px), calc(-57% + ${rateY}%))`
    const opacity = 1 - 0.7 * rate
    return { transform, opacity }
  }
  if (swiping.value && offset.value < 0) {
    const { offset, rate, rateY } = getTransitionValue()
    const transform = `translate(calc(-50% + ${offset}px), calc(-57% + ${rateY}%))`
    const opacity = 1 - 0.7 * rate
    return { transform, opacity }
  }
  return {}
})
const prevStyle = computed(() => {
  if (swiping.value && offset.value > 0) {
    const { offset, rate } = getTransitionValue()
    const transform = `translate(calc(-150% - 1rem - ${offset}px), -50%)`
    const opacity = 0.3 + 0.7 * rate
    return { transform, opacity }
  }
  if (swiping.value && offset.value < 0) {
    const { offset, rate, rateY } = getTransitionValue()
    const transform = `translate(calc(-150% - 1rem + ${offset}px), calc(-50% - ${rateY}%))`
    const opacity = 0.3 + 0.7 * rate
    return { transform, opacity }
  }
  return {}
})
const nextStyle = computed(() => {
  if (swiping.value && offset.value > 0) {
    const { offset, rate, rateY } = getTransitionValue()
    const transform = `translate(calc(50% + 1rem - ${offset}px),  calc(-50% - ${rateY}%))`
    const opacity = 0.3 + 0.7 * rate
    return { transform, opacity }
  }
  if (swiping.value && offset.value < 0) {
    const { offset, rate } = getTransitionValue()
    const transform = `translate(calc(50% + 1rem + ${offset}px), -50%)`
    const opacity = 0.3 + 0.7 * rate
    return { transform, opacity }
  }
  return {}
})
const prev2Style = computed(() => {
  if (swiping.value && offset.value < 0) {
    const { offset } = getTransitionValue()
    const transform = `translate(calc(-250% - 2rem + ${offset}px), -50%)`
    return { transform }
  }
  return {}
})
const next2Style = computed(() => {
  if (swiping.value && offset.value > 0) {
    const { offset } = getTransitionValue()
    const transform = `translate(calc(150% + 2rem - ${offset}px), -50%)`
    return { transform }
  }
  return {}
})
function getTransitionValue() {
  const _offset = Math.min(Math.abs(offset.value), HALF_VIEW_WIDTH * 2)
  const rate = _offset / (HALF_VIEW_WIDTH * 2)
  const rateY = rate * 7
  return { offset: _offset, rate, rateY }
}

const router = useRouter()
function toCreatorPage(username, id) {
  router.replace({
    name: 'creator',
    params: { username },
    query: { from: 'home', id },
  })
}
</script>

<style lang="scss" scoped>
.creator-wall {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .creators {
    height: 20.25rem;
    position: relative;

    &.swiping {
      .creator {
        transition: none;
        &.curr,
        &.prev,
        &.next,
        &.prev2,
        &.next2 {
          will-change: transform;
        }
      }
    }

    .creator {
      width: 13.375rem;
      height: 20.25rem;
      border-radius: 0.625rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -57%);
      opacity: 1;
      transition: transform 0.25s ease-out, opacity 0.25s ease-out;

      &.prev,
      &.prev2,
      &.next,
      &.next2 {
        opacity: 0.3;
      }

      &.prev {
        transform: translate(calc(-150% - 1rem), -50%);
      }
      &.prev2,
      &.prev-out {
        transform: translate(calc(-250% - 2rem), -50%);
      }

      &.next {
        transform: translate(calc(50% + 1rem), -50%);
      }
      &.next2,
      &.next-out {
        transform: translate(calc(150% + 2rem), -50%);
      }

      &.prev-out,
      &.next-out {
        display: none;
      }

      .info {
        width: 100%;
        height: 100%;
        padding: 3rem 1rem 1rem;
        background: rgba(24, 25, 37, 0.3);
        position: absolute;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
}
</style>
